<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <!-- <el-tab-pane label="NPI" name="first">
        <NPI />
      </el-tab-pane>
      <el-tab-pane label="排产信息" name="second">
        <schedule />
      </el-tab-pane> -->
      <el-tab-pane label="HMUI" name="third">
        <HMUI ref="hmui" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import NPI from './companents/npi.vue'
import schedule from './companents/schedule.vue'
import HMUI from './companents/hmui.vue'

export default {
  name: 'Dashboard',
  components: {
    NPI,
    schedule,
    HMUI
  },
  data() {
    return {
      projectId: '',
      activeName: 'third',
      list: null,
      listLoading: true
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  mounted() {
    if (this.$route.params && this.$route.params.projectId) {
      this.projectId = this.$route.params.projectId.toString()
    }
    if (this.activeName === 'third') {
      this.$refs.hmui.init(this.projectId)
    }
  },
  created() {
  },
  methods: {
    handleClick(tab, event) {
      if (tab === 'third') {
        this.$refs.hmui.init(this.projectId)
      }
      console.log(tab, event)
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
  background-color: #8EBE47;
  color: white;
}
</style>
